@import "variables", "utilities";

a[class*="btn"] {
  padding: 9px 36px 8px;
}

[class*="btn"] {
  @include border-radius(2px);
  
  margin-bottom:  10px;
  padding: 11px 36px 11px;
  background: $primary-button-color;
  
  border: none;
  color: $white;

  font-family: $base-font-family;
  font-size: $base-font-size;
  font-weight: 200;
  line-height: 14px;

  vertical-align: middle;

  // As of now we don't have a mixin for adding multiple box-shadows.
  // Will be really helpful to implement one.
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.5);
     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.5);
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.5);

  &:hover,
  &.hover,
  &:focus,
  &.focused {
    outline: none;
    background: $primary-button-hover-color;

    -webkit-box-shadow: inset 0 0 1px 2pt #037ea7, 0 2px 3px rgba(0,0,0,0.5);
       -moz-box-shadow: inset 0 0 1px 2pt #037ea7, 0 2px 3px rgba(0,0,0,0.5);
            box-shadow: inset 0 0 1px 2pt #037ea7, 0 2px 3px rgba(0,0,0,0.5);
  }

  &:active,
  &.active {
    padding: 11px 36px 10px;
    background: $primary-button-active-color;
    border: none;

    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.5), 0 0 2px 2pt rgba(51, 181, 229, 0.6);
       -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.5), 0 0 2px 2pt rgba(51, 181, 229, 0.6);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.5), 0 0 2px 2pt rgba(51, 181, 229, 0.6);
  }

  &:disabled,
  &.disabled {
    opacity: 0.3;
  }
}
.btn[disabled],
.btn-small[disabled] {
  opacity: 0.3;
}

[class*="btn"] + [class*="btn"] {
  margin-left: 3px;
}

.btn-small {
  font-size: 12px;
}

.btn-block {
  width: 100%;
}

.btn-block + .btn-block {
  margin-left: 0;
}